<template>
  <div id="operateAccount">
    <div id="index">
  <div id="selector_top_input">
    <el-form :inline="true" style="margin-left: 17%">
        <el-form-item>
<!--         <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
        </el-select> -->
        </el-form-item>

<!--       <el-form-item>
        <el-input v-model="input" placeholder="请输入内容" ></el-input>
      </el-form-item> -->
 <!-- 
      <el-form-item>
        <el-button type="primary" icon="search">搜索</el-button>
      </el-form-item> -->
    </el-form>
  </div>
<!--   <div id="top_input" style="margin-top: 2%;width: 10%;left: 40%">
    <el-input v-model="input" placeholder="请输入内容"></el-input>
  </div>
  <div id="tb" style="margin-top: 10%"> -->
<!-- position：relative absolute
float
块级元素
行内元素 -->
    <div id="update"> 



     <el-table
        :data="tableData"
        border
        style="width: 65%;margin: 0 auto;">
        <el-table-column
          fixed
          prop="account"
          label="账号"
          width="200">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="province"
          label="相关信息"
          width="150">
        </el-table-column>
        <el-table-column
          prop="operate"

          label="操作"
          width="300">
          <template scope="scope">
            <el-button @click="deleteDialogFormVisible(scope.row)" type="text" size="middle">删除</el-button>
<!-- 查看删除窗口 -->
                
            <el-button type="text" size="middle" @click="checkDialogFormVisible= true">查看</el-button>
<!-- 查看弹出窗口 -->
            <el-dialog
                title="提示"
                :visible.sync="checkDialogFormVisible"
                size="tiny">
                <div style="margin-top: 5px">用户名：阿罗</div>
                <div style="margin-top: 5px">类型：黄胡</div>
                <div style="margin-top: 5px">公开资料：已婚 军人</div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="checkDialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="checkDialogFormVisible = false">确 定</el-button>
                </span>
            </el-dialog>
          </template>
        </el-table-column>        
      </el-table>
      <el-pagination
        :class="['pager']"
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
      <el-button type="primary;" style="margin-left: 78%;margin-top: 10px" @click="dialogFormVisible = true">新增</el-button> 
<!-- 新增弹出窗口 -->
    <el-dialog title="新增账号" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="账号：" :label-width="formLabelWidth">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码：" :label-width="formLabelWidth">
          <el-input v-model="form.region" auto-complete="off"></el-input>
        </el-form-item>
            <el-form-item label="账号类型:" :label-width="formLabelWidth">
              <el-select v-model="form.type">
               <el-option label="管理员" value="minister"></el-option>
               <el-option label="用户" value="user"></el-option>
               <el-option label="情感专家" value="mood"></el-option>
              </el-select>
            </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>


    </div>
  </div>
</div>
  </div>
</template>

<script>
  export default {
    name: 'operateAccount',
       data() {
        return {
        tableData: [{
          account:"阿罗",
          name:"黄胡",
          province:"男 28岁"
        }, {
          account:"Abel",
          name:"张经理",
          province:"男 37岁"
        }, {
          account:"保镖",
          name:"赵佩儿",
          province:"女 18岁"
        }, {
          account:"闭月",
          name:"杨碧月",
          province:"女 20岁"
        }, {
          account:"冰冰",
          name:"杨玉白",
          province:"女 21岁"
        }, {
          account:"标",
          name:"建标",
          province:"男 23岁"
        }, {
          account:"C.H.L",
          name:"程华林",
          province:"男 22岁"
        }, {
          account:"茵茵",
          name:"陈乐茵",
          province:"女 20岁"
        }],

        options: [{
          value: '选项1',
          label: '用户'
        }, {
          value: '选项2',
          label: '管理员'
        }, {
          value: '选项3',
          label: '客服'
        }, {
          value: '选项4',
          label: '情感专家'
        }],

        input: '',
        value: '',
        form:{
          name:'',
          region:'',
          type:'',
        },
        dialogFormVisible: false,
        checkDialogFormVisible:false,
        formLabelWidth:'400',
      }
    },
    methods: {
      deleteDialogFormVisible(item) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
			let i = this.tableData.indexOf(item);
			this.tableData.splice(i,1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      onSubmit() {

      },
      getTableData(){
        this.$http({
          method: 'post',
          url: 'log/login',
          data: {}
        }).then((res)=>{
          res = res.data;
          let data = res.object;
          if(res.status == 'SUCCESS'){
            this.tableData = data.objects;
          }else{

          }
        }).catch((err)=>{

        })
      },
    },
    created(){
      this.getTableData();
    }
  }
</script>

<style scoped>
  #operateAccount{

  }
  .pager{
  margin: 10px 0px 10px 177px;
  }
</style>